<template>
  <div class="xieyi">
    <div class="tishi">
      <div class="ti-zi-1">温馨提示</div>
      <div class="ti-zi-2">欢迎使用"小默盒管家APP"!
        在您使用时，需要连接数据网络或者WLAN网络，所产生的流量费用请咨询当地运营商。我们非常重视您的个人信息和隐私保护。在您要使用本软件前，请仔细阅读</div>
      <div class="ti-zi-3">《用户协议》</div>
      <div class="ti-zi-4">和</div>
      <div class="ti-zi-5">《隐私政策》</div>
      <div class="ti-zi-6">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;,
        如您同意并接受全部条款，请点击"同意"并开始使用我们的产品和服务，我们将严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务，并尽全力保护您的个人信息安全。</div>
      <div class="ti-zuo">
        <div class="ti-zuo-zi" @click="previousPage()">不同意</div>
      </div>
      <div class="ti-you">
        <div class="ti-you-zi" @click="nextPage()">同意</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Protocol',
    methods: {
      previousPage() {
        this.$router.push({
          path: '/login/Protocol',
        });
      },
      nextPage() {
        this.$router.push({
          path: '/login/Login',
        });
      },
    },
  };
</script>

<style scoped>
  .xieyi {
    width: 414px;
    height: 100%;
    top: 0%;
    /* 固定定位 */
    position: fixed;
    margin-top: 0;
    margin-bottom: 0;
    /* 当内容超出容器高度时，垂直方向显示滚动条 */
    overflow-x: hidden;
    background-color: rgb(16 16 16 / 50%);
    /* border: 1px solid red; */
  }

  .tishi {
    width: 250px;
    height: 360px;
    float: left;
    margin: 50% 80px;
    background-color: white;
    /*设置边框圆角 */
    border-radius: 10px;
    /* border: 1px solid red; */
  }

  .ti-zi-1 {
    float: left;
    margin-top: 15px;
    margin-left: 95px;
  }

  .ti-zi-2 {
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 13px;
    /* 字体左对齐 */
    text-align: left;
    /* 行高 */
    line-height: 20px;
  }

  .ti-zi-3 {
    /* 绝对定位 */
    position: absolute;
    margin-top: 151px;
    margin-left: 25px;
    font-size: 13px;
    color: #4A9CD6;
  }

  .ti-zi-4 {
    /* 绝对定位 */
    position: absolute;
    margin-top: 151px;
    margin-left: 100px;
    font-size: 13px;
  }

  .ti-zi-5 {
    /* 绝对定位 */
    position: absolute;
    margin-top: 151px;
    margin-left: 110px;
    font-size: 13px;
    color: #4A9CD6;
  }

  .ti-zi-6 {
    width: 225px;
    /* 绝对定位 */
    position: absolute;
    margin-top: 150px;
    margin-left: 15px;
    font-size: 13px;
    /* 字体左对齐 */
    text-align: left;
    /* 行高 */
    line-height: 20px;
  }

  .ti-zuo {
    width: 100px;
    height: 35px;
    float: left;
    margin-top: 120px;
    margin-left: 10px;
    border: 1px solid black;
    /*设置边框圆角 */
    border-radius: 20px;
    font-size: 12px;
  }

  .ti-zuo-zi {
    float: left;
    margin: 10px 0px 0px 31px;
  }

  .ti-you {
    width: 100px;
    height: 35px;
    float: left;
    margin-top: 120px;
    margin-left: 25px;
    background-color: #4A9CD6;
    color: white;
    /*设置边框圆角 */
    border-radius: 20px;
    font-size: 12px;
  }

  .ti-you-zi {
    float: left;
    margin: 10px 0px 0px 38px;
  }
</style>